{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <link rel="stylesheet" href="{% static 'plugin/cropper/cropper.css' %}">
  <link rel="stylesheet" href="{% static 'plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/login_.css' %}">
    <link rel="icon" href="{% static 'ico/favicon.ico' %}">
    <script src="{% static 'js/jquery/jquery-3.5.1.js' %}"></script>
    <script src="{% static 'js/account/login.js' %}"></script>

</head>
<body>
  <div class="container right-panel-active">
    <!-- Sign In -->
    <div class="container__form container--signin">
        {% if request.GET.next %}
      <form class="form" id="form2" action="{% url 'account:userCheck' %}?next={{ request.GET.next }}" method="post">
        {% else %}
        <form class="form" id="form2" action="{% url 'account:userCheck' %}" method="post">
        {% endif %}
            <h2 class="form-signin-heading" style="font-family: 华文中宋,sans-serif">登录</h2>
          <label for="sign_in_e">Email
              <input type="email" placeholder="例:xxx@qq.com" class="input" style="width: 280px" id="sign_in_e" name="email"/>
          </label>
          <label for="sign_in_p">Password
              <input type="password" placeholder="例:abcde123" class="input" style="width: 280px;" id="sign_in_p" name="pwd"/>
          </label>
          <div class="checkbox">
          <label>
            <input type="checkbox" value="1" name="allow" checked> Remember me
          </label>
          </div>
          {% csrf_token %}
          <a href="#" class="help-block">Forgot your password?</a>
          <button class="btn" type="submit" id="sign_in">Sign In</button>
      </form>
    </div>
    <!-- Sign Up -->
    <div class="container__form container--signup">
      <form class="form" id="form1" enctype="multipart/form-data">
        <h2 class="form-signup-heading" style="font-family: 华文中宋,sans-serif">注册</h2>
        <label class="control-label" for="InputEmail" style="padding-bottom: 0;margin-bottom: 0">Email address</label>
          <div class="form-group has-feedback" id="e" style="margin-bottom: 0.7px;padding-bottom: 0">
            <input type="text" class="form-control" id="InputEmail" placeholder="Email" aria-describedby="inputGroupEStatus" style="width: 260px;">
              <span id="eStatus" style="color:red;padding-bottom: 0" class="Status"></span>
          </div>

            <label class="control-label" for="InputPassword" style="padding-bottom: 0;margin-bottom: 0;margin-top: 3px">Password</label>
          <div class="form-group has-feedback" id="p" style="margin-bottom: 0.7px;padding-bottom: 0">
            <input type="password" class="form-control" id="InputPassword" placeholder="Password" aria-describedby="inputGroupPStatus" style="width: 260px;">
              <span id="pStatus" style="color:red;padding-bottom: 0" class="Status"></span>
          </div>

        <label class="control-label" for="CheckPassword" style="padding-bottom: 0;margin-bottom: 0;margin-top: 3px">Check Password</label>
          <div class="form-group has-feedback" id="pc" style="margin-bottom: 0.7px;padding-bottom: 0">
            <input type="password" class="form-control" id="CheckPassword" placeholder="Enter the password again" aria-describedby="CheckGroupPStatus" style="width: 260px;">
              <span id="pcStatus" style="color:red;padding-bottom: 0" class="Status"></span>
          </div>

        <label class="control-label" for="CheckCode" style="padding-bottom: 0;margin-bottom: 0;margin-top: 3px">Check Code</label>
          <div class="form-group has-feedback" id="c">
            <input type="text" class="form-control" id="CheckCode" placeholder="Code" style="background-color: white">
              <input id="getCode" type="button" class="btn btn-default" value="获取验证码"/>
          </div>
          <div class="form-group" id="image-container">
            <input type="button" id="InputFile" value="上传头像">
              <div class="img-box">
                  <img src="" alt="" id="imgBoxId" class="imgBox">
            </div>
          </div>
        {% csrf_token %}
          <button class="btn" type="submit" id="sign_up" style="margin-top: 10px">Sign Up</button>
      </form>
    </div>
<!--图片裁剪模块-->
  <div class="popup-wrap">
    <div class="s-upload-container">
      <div class="head">
        <span>上传图片</span>
        <input type="button" class="btn" id="closeBtn" value="关闭" />
      </div>
      <div class="s-upload-main">
        <!-- 上传图片 -->
        <div class="top-box">
          <span class="title">图片上传</span>
          <div class="btn file-box">
            选择文件
            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="file" class="btn" onchange="selectImg(this)" multiple="multiple">
          </div>
          <div class="right">预览区域</div>
        </div>
        <div class="s-upload-content">
          <!-- 裁剪区域 -->
          <div class="left-box">
            <img src="" id="imageId" alt="" class="image">
          </div>
          <!-- 预览区域 -->
          <div class="right-box">
            <div class="previewBox"></div>
          </div>
        </div>
        <div class="action bottom-box">
          <!-- 旋转 -->
            <div class="left">
              <input type="button" id="btnLeft"  value="向左旋转" class="btn">
              <input type="button" id="btnRight" value="向右旋转" class="btn">
            </div>
            <div class="right">
              <!-- 放大、缩小、还原 -->
              <input type="button" id="btnLarge" class="btn" value="放大">
              <input type="button" id="btnSmall" class="btn" value="缩小" >
              <input type="button" id="btnScale" class="btn" value="换向">
              <input type="button" id="btnInit" class="btn" value="还原">
              <!-- 保存 -->
              <input type="button" id="btnSubmit" class="btn submit" value="保存修改" >
            </div>
        </div>
      </div>
    </div>
  </div>
    <!-- Overlay -->
    <div class="container__overlay">
      <div class="overlay">
        <div class="overlay__panel overlay--left">
          <button class="btn" id="signIn">Sign Up</button>
        </div>
        <div class="overlay__panel overlay--right">
          <button class="btn" id="signUp">Sign In</button>
        </div>
      </div>
    </div>
</div>


<script src="{% static 'plugin/cropper/jquery-cropper.js' %}"></script>
<script src="{% static 'plugin/cropper/cropper.js' %}"></script>
<script src="{% static 'plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

</body>
</html>
